2023/12/232458字符

选择器

HTML

<div class="box">
    <p class="aa">第1行</p>
    <p class="bb"><span>第2行</span></p>
    <p class="cc">第3行</p>
    <p class="dd">第4行</p>
    <p class="ee">第5行</p>
    <p class="ff">第6行</p>
    <p class="gg">第7行</p>
    <p></p>
    <p class="hh">第9行</p>
</div>

基本选择器

$("p:first").css("color", "#f00");  // 第一个元素
$("p:last").css("color", "#0f0");  // 最后一个元素
$("p:not(:first,:last)").css("color", "#00f");  // 除了第一个元素
$("p:odd").css("background", "#ff0");  // 偶数行元素
$("p:even").css("background", "#0ff");  // 奇数行元素
$("p:eq(3)").css("border", "1px solid #f0f");  // 指定行数元素
$("p:gt(3)").css("border", "1px solid #0ff");  // 指定行数之后元素
$("p:lt(3)").css("border", "1px solid #ff0");  // 指定行数之前元素
$("p:header");  // 标题元素
$("div:animated");  // 正在执行动画的元素

$("p:contains('5')").css("color", "#f00");  // 定义含有所含字符的元素
$("p:has(span)").css("background", "#f0f");  // 含有 span 标签的元素
$("p:parent").css("background", "#f0f");  // 含有文本的元素
$("p:empty").css({  // 不包含子元素或者文本的空元素
    width: "100%",
    height: "20px",
    background: "#ff0"
});

可见性

$("p:hidden");  // 选择不可见元素
$("p:visible");  // 选择可见元素

属性选择器

$("p[class='aa']");  // 含有定义属性名的元素
$("p[class^='first']");  // 以定义属性名开头的元素
$("p[class$='last']");  // 以定义属性名结尾的元素
$("p[class$='center']");  // 包含以定义属性名的元素
$("p[class][class$='last']");  // 含有 class 属性并且以定义属性名结尾的元素

子元素选择器

$("div p:nth-child(2)");  // 父元素的第 2 个子元素
$("div p:nth-child(3n)");  // 父元素中是 3 的倍数子元素
$("div p:first-child");  // 父元素的第一个子元素
$("div p:last-child");  // 父元素的最后一个子元素
$("div p:only-child");  // 父元素的唯一一个子元素

表单选择器

$("input:input");  // :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden :focus
                   // :enabled 可用元素  :disabled 不可用元素  :checked 被选中元素  :selected 所有option元素